<template>
  <div class="category">
  <h2>{{ title }}</h2>
  <!-- 默认插槽 -->
  <!-- <slot>默认内容</slot> -->

  <!-- 具名插槽 -->
   <!-- 用插槽的名字限制显示的位置 -->
   <slot name="content">默认内容content</slot>
   <slot name="place">默认内容place</slot>
  </div>
</template>

<script setup lang="ts" name="Category">
  defineProps(["title"])
</script>

<style scoped>
  .category {
    background-color: skyblue;
    border-radius: 10px;
    box-shadow: 0 0 10px;
    padding: 10px;
    width: 200px;
    height: 300px;
  }
  h2{
    text-align: center;
    background-color: orange;
    font-size: 20px;
    font-weight: 800;
    border-radius: 5px;
  }
</style>